import React from 'react'
import http from '../../utils/http'
import {
  Form,
  Input,
  Button,
  Tabs,
  Toast
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import image from '../../images/image.png'
function Index() {
  const navigate = useNavigate()
  const onFinish = async (value) => {
    const res = await http.post('/api/login', value)

    const { code, data } = res.data

    if (code === 200){
      localStorage.setItem('token',data.token)
      localStorage.setItem('userInfo',JSON.stringify(data.userInfo))
      Toast.show({
        icon:'success',
        content:'登录成功',
        duration:1000
      })
      navigate('/')
    }
  }
  return (
    <div>
      <Tabs>
        <Tabs.Tab title='App登录' key='fruits'>
          <img src={image} alt="" style={{marginLeft:'25%'}}/>
        </Tabs.Tab>
        <Tabs.Tab title='免密登录' key='vegetables'>
          免密登录
        </Tabs.Tab>
        <Tabs.Tab title='账号登录' key='animals'>
          <Form
            onFinish={onFinish}
            layout='horizontal'
            footer={
              <Button block type='submit' color='primary' size='large'>
                登录
              </Button>
            }
          >
            <Form.Item
              name='username'
              label='手机号'
              rules={[{ required: true, message: '手机号不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入手机号' />
            </Form.Item>
            <Form.Item
              name='password'
              label='密码'
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入密码' />
            </Form.Item>
          </Form>
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default Index
